/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/24 Time: 20:57
 *
 * 客人偏好
 */

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './GuestPreferenceScreen.Style';
import {FONT_COLOR_SUB_TITLE, FONT_SIZE_14} from "../../../constant/PHColors"
import DateDisplayView from "../../../component/DateDisplayView/DateDisplayView"
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent"
import SortTitleView from "./component/SortTitleView"
import GoodsAndCountView from "./component/GoodsAndCountView"
import WorkOrderHistogramView from "./component/WorkOrderHistogramView"

let arr = [
  {name: '矿泉水', count: 8},
  {name: '面巾纸', count: 5},
  {name: '客人叮嘱', count: 2}
];

const counts = [
  0, 0, 0, 0,
  0, 0, 0, 0,
  1, 2, 7, 0,
  0, 0, 0, 0,
  1, 2, 0, 0,
  0, 3, 4, 0
];

class GuestPreferenceScreen extends Component {

  static navigationOptions = {
    title: '客人偏好'
  }

  render() {
    return (
      <View style={styles.body}>

        {
          <DateDisplayView
            leftText={'11.12-11.18'}
            onClickLeft={() => {
            }}
          />
        }

        <ScrollView style={{flex: 1}}>

          <DividingLineViewComponent lineHeight={10}/>

          <SortTitleView title={'常用服务'} onClick={() => {
            // 跳转到服务项排序单列表
            this.props.navigation.navigate('ServiceItemOrderScreen', {data: arr});
          }}/>
          <DividingLineViewComponent lineHeight={2}/>
          {
            arr.map((item, index) => {
              return (
                <GoodsAndCountView key={index} index={index} name={item.name} count={item.count}/>
              )
            })
          }

          <DividingLineViewComponent lineHeight={10}/>

          <SortTitleView title={'客人最需要物品'} onClick={() => {
            this.props.navigation.navigate('GoodsItemOrderScreen', {data: arr});
          }}/>
          <DividingLineViewComponent lineHeight={2}/>
          {
            arr.map((item, index) => {
              return (
                <GoodsAndCountView key={index} index={index} name={item.name} count={item.count}/>
              )
            })
          }
          {
            <View style={{height: 50, justifyContent: 'center', alignItems: 'center', marginLeft: 20, marginRight: 20}}>
              <Text style={{fontSize: FONT_SIZE_14, color: FONT_COLOR_SUB_TITLE}}>
                统计项的工单数太少，您可以选择长时间段，统计会更准确
              </Text>
            </View>
          }

          <DividingLineViewComponent lineHeight={10}/>
          <SortTitleView title={'对客服务高峰时段'} onClick={() => {
            this.props.navigation.navigate('HoursOfCustomerServiceScreen', {data: counts})
          }}/>
          <DividingLineViewComponent lineHeight={2}/>
          <WorkOrderHistogramView/>

          <DividingLineViewComponent lineHeight={10}/>
          <SortTitleView title={'退房检查高峰时段'} onClick={() => {
            this.props.navigation.navigate('HoursOfCheckOutScreen', {data: counts})
          }}/>
          <DividingLineViewComponent lineHeight={2}/>
          <WorkOrderHistogramView/>

        </ScrollView>

      </View>
    )
  }

}

const props = state => {
  return {}
}

export default GuestPreferenceScreen = connect(props)(GuestPreferenceScreen)
